<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>浏览记录</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入姓名" clearable v-model="username" @clear="searchUserHistory">
                        <el-button slot="append" icon="el-icon-search" @click="searchUserHistory"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="recoverAllHistory">恢复所有</el-button>
                    <el-button type="danger" @click="deleteAllHistory">删除所有</el-button>
                </el-col>
            </el-row>
            <el-table :data="userHistoryList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="姓名" prop="username"></el-table-column>
                <el-table-column label="文章标题" prop="title"></el-table-column>
                <el-table-column label="时间" prop="createTime"></el-table-column>
                <el-table-column label="是否删除" min-width="25%">
                  <template slot-scope="scope">
                    <span v-if="scope.row.isDelete=='1'" style='color: red'>是</span>
                    <span v-if="scope.row.isDelete=='0'" style='color: greenyellow'>否</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                      <el-button v-if="scope.row.isDelete == 1" type="primary" size="mini" @click="changeFrozen(scope.row.id,0)">恢复</el-button>
                      <el-button v-if="scope.row.isDelete == 0" type="success" size="mini" @click="changeFrozen(scope.row.id,1)">删除</el-button>

                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageNum"
                    :page-sizes="[5, 10,15]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
            ></el-pagination>
        </el-card>
        <!--添加用戶-->

    </div>
</template>
<script>
    export default {
        data() {
            return {
                pageNum: 1,
                pageSize: 5,
                total:0,
                username: "",
                userHistoryList:[],
            };
        },
        methods: {
          changeFrozen(id,isDelete){
            let url = "user/changeHistoryIsDelete";
            this.$axios.get(url,{
              params:{
                id:id,
                isDelete:isDelete
              }
            }).then(res=>{
              if (res.data.code == 200){
                this.$message({
                  type:'success',
                  message:res.data.msg,
                  duration:1000
                });
                this.initUserHistory();
              }else {
                this.$message({
                  message:res.data.msg,
                  type:"error",
                  duration:1000
                })
              }
            })
          },
          deleteAllHistory(){
            let url = "user/deleteAllHistory";
            this.$axios.get(url).then(res=>{
              if (res.data.code == 200){
                this.$message({
                  type:'success',
                  message:res.data.msg,
                  duration:1000
                });
                this.initUserHistory();
              }else {
                this.$message({
                  message:res.data.msg,
                  type:"error",
                  duration:1000
                })
              }
            })
          },
          recoverAllHistory(){
            let url = "user/recoverAllHistory";
            this.$axios.get(url).then(res=>{
              if (res.data.code == 200){
                this.$message({
                  type:'success',
                  message:res.data.msg,
                  duration:1000
                });
                this.initUserHistory();
              }else {
                this.$message({
                  message:res.data.msg,
                  type:"error",
                  duration:1000
                })
              }
            })
          },
          removeHistoryById(id){
            let url = "user/delHistory/"+id;
            this.$axios.delete(url)
                .then(res=>{
                  if (res.data.code == 200){
                    this.$message({
                      type:'success',
                      message:res.data.msg,
                      duration:1000
                    });
                    this.initUserHistory();
                  }else {
                    this.$message({
                      message:res.data.msg,
                      type:"error",
                      duration:1000
                    })
                  }
                })
          },
          handleSizeChange(newSize) {
            this.pageSize = newSize;
            this.initUserHistory();
          },
          handleCurrentChange(newPage) {
            this.pageNum = newPage;
            this.initUserHistory();
          },
          searchUserHistory(){
            this.pageNum =1;
            this.initUserHistory();
          },

          initUserHistory(){
            let url = "user/hList";
            this.$axios.get(url,{
              params:{
                username:this.username,
                now:this.pageNum,
                size:this.pageSize
              }
            }).then(res=>{
              if(res.data.code==200){
                console.log(res.data.data.list)
                this.userHistoryList = res.data.data.list;
                this.pageNum = res.data.data.pageNum;
                this.pageSize = res.data.data.pageSize;
                this.total = res.data.data.total;
              }else {
                this.$message({
                  type:"error",
                  message:res.data.msg,
                  duration:1000
                })
              }
            })
          }

        },
        created() {
            this.initUserHistory();
        }
    };
</script>
<style lang="less" scoped>
</style>